AMP HTML এবং CSS Best Practices অনুসরণ করা আপনার AMP পেজের পারফরম্যান্স এবং লোডিং স্পিড উন্নত করতে সাহায্য করে, যা গুগলের মোবাইল-ফার্স্ট ইনডেক্সিং এবং সার্চ র্যাঙ্কিংয়ে ভাল ফলাফল আনতে সহায়ক হতে পারে। AMP পেজগুলোকে দ্রুত এবং কার্যকরীভাবে লোড করার জন্য কিছু নির্দিষ্ট টেকনিক এবং কৌশল রয়েছে, যেগুলো আপনার ওয়েবসাইটের অভিজ্ঞতা উন্নত করতে পারে। এখানে AMP HTML এবং CSS Best Practices দেওয়া হলো:
AMP HTML Best Practices
AMP HTML সঠিকভাবে ব্যবহার করুন:
- AMP পেজ তৈরি করার সময় নিশ্চিত করুন যে আপনি
ampঅ্যাট্রিবিউট সহ সঠিক HTML ট্যাগ ব্যবহার করছেন, যেমন<html ⚡>বা<html amp>, যা গুগল AMP পেজের বৈধতা নিশ্চিত করে।
<!doctype html> <html ⚡>- AMP পেজ তৈরি করার সময় নিশ্চিত করুন যে আপনি
প্রত্যেকটি AMP পেজে ক্যানোনিক URL অন্তর্ভুক্ত করুন:
- AMP পেজের ক্যানোনিক URL অবশ্যই
linkট্যাগে যুক্ত করতে হবে। এটি গুগলকে জানিয়ে দেয় যে এই পেজটি মূল পেজের একটি AMP ভার্সন, যাতে গুগল এটি ইনডেক্স করতে পারে।
<link rel="canonical" href="https://www.yoursite.com/original-page/">- AMP পেজের ক্যানোনিক URL অবশ্যই
AMP JS লাইব্রেরি লোড করুন:
- AMP পেজে JavaScript ব্যবহার সীমিত থাকে, তাই
amp.jsলাইব্রেরি লোড করতে হবে। এটি পেজের দ্রুত লোডিং নিশ্চিত করতে সহায়তা করে। সাধারণভাবে, এটি<head>সেকশনে যুক্ত করতে হয়।
<script async src="https://cdn.ampproject.org/v0.js"></script>- AMP পেজে JavaScript ব্যবহার সীমিত থাকে, তাই
ব্যবহার করুন AMP ট্যাগ:
- AMP HTML স্ট্যান্ডার্ড অনুসরণ করে কেবলমাত্র AMP ট্যাগগুলি ব্যবহার করতে হবে। যেমন:
<amp-img>: ইমেজ লোডিংয়ের জন্য<amp-video>: ভিডিও এম্বেড করার জন্য<amp-iframe>: অন্যান্য ওয়েব কন্টেন্ট এম্বেড করতে<amp-story>: ইন্টারঅ্যাক্টিভ স্টোরি পেজ তৈরি করতে
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>- AMP HTML স্ট্যান্ডার্ড অনুসরণ করে কেবলমাত্র AMP ট্যাগগুলি ব্যবহার করতে হবে। যেমন:
- AMP-ফ্রেন্ডলি ইন্টারঅ্যাকশন:
amp-bind,amp-form,amp-stateইত্যাদি ট্যাগ ব্যবহার করে আপনি ইন্টারঅ্যাক্টিভ ফিচার অন্তর্ভুক্ত করতে পারেন, তবে সেগুলোর ব্যবহার সীমিত এবং সঠিকভাবে AMP লাইব্রেরির সাথে মিলিয়ে করতে হবে।
- এনিমেশন এবং ট্রানজিশন:
- AMP স্টোরিতে AMP Animation API ব্যবহার করা যেতে পারে, তবে সব ধরনের জাভাস্ক্রিপ্ট লাইব্রেরি বা কাস্টম স্ক্রিপ্ট ব্যবহার করা যাবে না।
- ট্যাগগুলির সঠিক ব্যবহার:
- AMP পেজের জন্য HTML ট্যাগের কিছু সীমাবদ্ধতা রয়েছে। যেমন, JavaScript পুরোপুরি নিষিদ্ধ, এবং CSS এর আকার ৫০ KB এর বেশি হতে পারবে না।
AMP CSS Best Practices
সীমিত CSS ব্যবহার করুন:
- AMP পেজে ব্যবহৃত CSS কোডের আকার ৫০ KB এর বেশি হতে পারবে না। এটি গুগল নিশ্চিত করতে চায় যে পেজটি দ্রুত লোড হয় এবং অতিরিক্ত স্টাইলিং কন্টেন্ট লোডিংয়ে বিলম্ব সৃষ্টি না করে।
<style amp-custom> body { font-family: Arial, sans-serif; } h1 { color: #333; } </style>- AMP CSS কোড অপ্টিমাইজ করুন:
- CSS কোডের আকার ছোট করতে এবং লোড সময় কমানোর জন্য কম্প্রেস এবং মিনিফাই করুন। ব্যবহার না হওয়া CSS ক্লাস বা স্টাইলগুলো সরিয়ে ফেলুন।
রেসপন্সিভ ডিজাইন ব্যবহার করুন:
- AMP পেজগুলো মোবাইল ডিভাইসে এবং অন্যান্য প্ল্যাটফর্মে সঠিকভাবে প্রদর্শিত হতে হবে।
layout="responsive"অ্যাট্রিবিউট ব্যবহার করে ডিজাইন রেসপন্সিভ করুন, যাতে পেজটি সব স্ক্রীন সাইজে সুন্দরভাবে ফিট হয়।
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>- AMP পেজগুলো মোবাইল ডিভাইসে এবং অন্যান্য প্ল্যাটফর্মে সঠিকভাবে প্রদর্শিত হতে হবে।
- উচ্চ গুণমানের ইমেজ সাইজ ব্যবহার করুন:
- ইমেজগুলোর জন্য
<amp-img>ট্যাগ ব্যবহার করুন এবং সেগুলোর জন্য যথাযথ সাইজ ও রেজোলিউশন ব্যবহার করুন যাতে পেজটি দ্রুত লোড হয়।
- ইমেজগুলোর জন্য
- অ্যানিমেশন এবং ইফেক্টস সংযোজন:
- CSS ট্রানজিশন এবং এনিমেশন ব্যবহার করে পেজের ইন্টারঅ্যাকটিভিটি বৃদ্ধি করতে পারেন। তবে খুব বেশি জটিল অ্যানিমেশন ব্যবহার করা যাবে না, কারণ এটি পেজ লোডিং টাইম বাড়িয়ে দিতে পারে।
- গুগল ফন্ট এবং ক্যাস্টম ফন্ট ব্যবহার:
- AMP সাইটে ফন্ট লোডিং দ্রুত করার জন্য
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">ফন্ট লিংক ব্যবহার করতে পারেন। তবে ফন্টের আকার কম রাখতে হবে এবং নিশ্চিত করুন যে এটি মোবাইল ডিভাইসে দ্রুত লোড হয়।
- AMP সাইটে ফন্ট লোডিং দ্রুত করার জন্য
- CSS গঠন এবং কোড সংগঠন:
- স্টাইলশিটকে পরিষ্কার এবং পঠনযোগ্য রাখুন। অতিরিক্ত বা অনাবশ্যক কোড কমাতে নিয়মিত কোড রিভিউ করুন। স্টাইল শীটের ভিতরে কমেন্ট লিখে কোডের উদ্দেশ্য স্পষ্ট করুন।
অতিরিক্ত গুরুত্বপূর্ণ AMP Best Practices
Lazy-Loading ব্যবহার করুন:
- AMP পেজে ইমেজ, ভিডিও বা অন্যান্য মিডিয়া lazy load করতে ব্যবহার করুন। এটি ওয়েব পেজের লোডিং টাইম কমায় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
<amp-img src="image.jpg" width="600" height="400" layout="responsive" loading="lazy"></amp-img>- রেসপন্সিভ এবং ফ্লুইড ডিজাইন:
- AMP সাইটগুলো রেসপন্সিভ ডিজাইনের জন্য তৈরি হওয়া উচিত, যাতে এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হয়। AMP পেজে CSS সঠিকভাবে হ্যান্ডল করার জন্য
layout="responsive"ব্যবহার করুন।
- AMP সাইটগুলো রেসপন্সিভ ডিজাইনের জন্য তৈরি হওয়া উচিত, যাতে এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে প্রদর্শিত হয়। AMP পেজে CSS সঠিকভাবে হ্যান্ডল করার জন্য
- ফাস্ট লোডিং নিশ্চিত করুন:
- AMP পেজের লক্ষ্য হল দ্রুত লোড হওয়া। সাইটের স্লো লোডিং বা বড় ইমেজ ফাইলের জন্য ব্যান্ডউইথ বেশি ব্যবহার করা উচিত নয়। ইমেজ, CSS, স্ক্রিপ্ট এবং অন্যান্য মিডিয়া ফাইল গুলি কমপ্রেস করা উচিত।
- AMP Validation:
- AMP পেজটি সঠিকভাবে তৈরি হয়েছে কিনা তা পরীক্ষা করার জন্য AMP Validator ব্যবহার করুন। এটি পেজের মধ্যে কোন ভুল বা ত্রুটি থাকলে তা শনাক্ত করতে সহায়তা করবে।
- AMP Validator
সারাংশ
AMP HTML এবং CSS Best Practices অনুসরণ করে আপনি আপনার AMP সাইটের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন। AMP সাইটের জন্য সঠিক HTML ট্যাগ ব্যবহার করা, CSS কোড মিনিফাই করা এবং মোবাইল-ফ্রেন্ডলি ডিজাইন ব্যবহার করা খুবই গুরুত্বপূর্ণ। আপনি যদি AMP পেজের জন্য সর্বোচ্চ মানের অভিজ্ঞতা চান, তবে লোড টাইম, রেসপন্সিভ ডিজাইন এবং এনিমেশন অপ্টিমাইজেশনে বিশেষ মনোযোগ দিন।
Read more
